<template>
	<div class="table-search-container" v-if="props.search.length > 0">
		<el-form ref="tableSearchRef" :model="state.form" size="default" label-width="100px" class="table-form"
			>
			<el-row @keyup.enter.native="onSearch(tableSearchRef)" :gutter=10 >
						<el-col :gutter=5 :xs="24" :sm="12" :md="8" :lg="6" :xl="4"
							v-for="(val, key) in search" :key="key" v-show="key < 4 || state.isToggle">
							<template v-if="val.type !== ''">
								<el-form-item label-width="0px" :prop="val.prop"
									:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]">
									<el-input size="default" v-model="state.form[val.prop]" :placeholder="val.placeholder" clearable
										v-if="val.type === 'input'" style="width: 100%">
									</el-input>
									<el-date-picker size="default" v-model="state.form[val.prop]" type="date"
										:placeholder="val.placeholder" v-else-if="val.type === 'date'"
										style="width: 100%" />
									<el-select size="default" v-model="state.form[val.prop]" :placeholder="val.placeholder"
										:value-on-clear="null" clearable v-else-if="val.type === 'select'"
										style="width: 100%" filterable allow-create>
										<el-option v-for="item in val.options" :key="item.value" :label="item.label"
											:value="item.value"> </el-option>
									</el-select>
								</el-form-item>
							</template>
						</el-col>
			</el-row>
			<el-row>
				<el-col :span=24>
					<div style="display: flex;gap: 10px;">
					<el-button  size="default" type="primary" @click="onSearch(tableSearchRef)" icon="Search" >{{ $t('message.common.search') }}</el-button>
					<!--<el-button size="default" type="primary" @click="onAdd" icon="ele-Plus">{{ $t('message.common.add') }}</el-button>-->
					<el-switch v-model="state.isToggle" :inactive-text="$t('message.common.more')" :active-text="$t('message.common.less')" inline-prompt />
					<el-pagination  size="default" v-model:current-page="state.page.pageNum" v-model:page-size="state.page.pageSize" :pager-count="5"
						:page-sizes="[20, 40, 60]" :total="props.config.total" layout="total, sizes, prev, pager, next, jumper" background
						@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange">
					</el-pagination>
          <el-button size="default" type="primary" @click="handleExport">{{ $t('message.common.exportAsCsv') }}</el-button>
          <el-upload
            :show-file-list="false"
            accept=".csv"
            :before-upload="handleImport"
            class="upload-btn"
          >
            <el-button size="default" type="success">{{ $t('message.common.importCsv') }}</el-button>
          </el-upload>
		  <el-button @click="handleImportImages" size="default" type="success">{{ $t('message.common.importImages') }}</el-button>
		  <el-button @click="handleDeleteDisliked" size="default" type="danger">{{ $t('message.common.deleteDisliked') }}</el-button>
		  <el-button @click="handleDeleteFilter" size="default" type="danger">{{ $t('message.common.deleteFilter') }}</el-button>
        </div>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup lang="ts" >
import { reactive, ref, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';

// 定义父组件传过来的值
const props = defineProps({
	// 搜索表单
	search: {
		type: Array,
		default: () => [],
	},
	config: {
		type: Object,
		default: () => { }
	},
	getUrl:{
		type: String,
	},
	exportUrl:{
		type: String,
	}
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['search','openAdd','pageChange','export','import', 'import-images','delete-disliked','delete-filter']);

// 定义变量内容
const tableSearchRef = ref<FormInstance>();
const state = reactive({
	form: {},
	isToggle: false,
	page: {
		pageNum: 1,
		pageSize: 20
	},
	loading: false,
});

// 分页改变
const onHandleSizeChange = async (val: number) => {
  try {
    state.loading = true
    state.page.pageSize = val
    await emit('pageChange', state.page)
  }
  finally {
    state.loading = false
  }
}

// 分页改变
const onHandleCurrentChange = async (val: number) => {
  try {
    state.loading = true
    state.page.pageNum = val
    await emit('pageChange', state.page)
  } finally {
    state.loading = false
  }
}

// 搜索时，分页还原成默认
const pageReset = async () => {
  try {
    state.loading = true
    state.page.pageNum = 1
    state.page.pageSize = 20
    await emit('pageChange', state.page)
  }
  finally {
    state.loading = false
  }
}

// 查询
const onSearch = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
			emit('search', state.form);
		} else {
			return false;
		}
	});
};

const onAdd = () => {
	emit('openAdd', null)
}
// 重置
const onReset = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	emit('search', state.form);
};

const initFormField = () => {
	if (props.search.length <= 0) return false;
	props.search.forEach((v) => (state.form[v.prop] = ''));
};

const handleExport = ()=>{
  emit('export',state.form)
}

const handleImport = async (file: File) => {
  emit('import', file); 
  return false;
};

const handleImportImages = () => {
  emit('import-images');
};

const handleDeleteDisliked = ()=>{
	emit('delete-disliked');
}

const handleDeleteFilter = ()=>{
	emit('delete-filter',state.form)
}
// 页面加载时
onMounted(() => {
	initFormField();
});

// 暴露方法
defineExpose({
  pageReset
})
</script>

<style scoped >
.table-search-container {
	display: flex;
	.table-form {
		flex: 1;
		.table-form-btn-toggle {
			white-space: nowrap;
			user-select: none;
			display: flex;
			align-items: center;
			color: var(--el-color-primary);
		}
	}
}
</style>

